import React, { FC, useState } from "react";
import { Link, useNavigate } from "react-router-dom";
// import { useRequest } from "ahooks";
// import { GetUserInfo } from "../../service";
import { UserOutlined } from "@ant-design/icons";
import { clearUserToken, getUserToken } from "../../until/userToken";
import { useDispatch } from "react-redux";
import { StateType } from "../../store";
import { message } from "antd";
import { resetUserInfo_reducer } from "../../store/userInfo";
//自定义hook
import useGetUserInfo_redux from "../../hooks/useGetUserInfo_redux";

const UserInfo: FC = () => {
  const nav = useNavigate();
  const dispatch = useDispatch();
  // const { data, loading } = useRequest(GetUserInfo);
  // const { username, nickname } = data || {};

  //自定义hooks
  const { username, nickname } = useGetUserInfo_redux();

  const logOut = () => {
    clearUserToken();
    //清空数据状态管理库
    dispatch(resetUserInfo_reducer());
    message.success("退出成功");
    nav("/login");
  };
  const userinfo = (
    <div style={{ textAlign: "right" }}>
      <span style={{ color: "white", marginRight: "10px" }}>
        <UserOutlined></UserOutlined>
        {nickname}
      </span>
      <button onClick={logOut}>退出</button>
    </div>
  );
  const login = (
    <>
      <Link to="/login">登录</Link>
    </>
  );
  return <>{getUserToken() && username ? userinfo : login}</>;
};

export default UserInfo;
